<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="initdata()" size="small">查询搜索</el-button>
        <el-button style="float:right;margin-right: 15px" @click="resetfiled()" size="small">重置</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="分组名称">
            <el-input v-model="listQuery.name" class="input-width" placeholder="请输入分组名称" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button size="mini" class="btn-add" @click="isadd()" style="margin-left: 20px">添加</el-button>
    </el-card>

    <div style="margin:0px;" v-loading="loading">
      <el-table
        :data="tableData"
        border
        stripe
        row-key="id"
        :indent="32"
        :tree-props="{children: 'subs', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="分组名称" align="left"></el-table-column>
        <el-table-column prop="location" label="经纬度" align="center"></el-table-column>
        <el-table-column prop="comment" label="备注" align="center"></el-table-column>
        <el-table-column prop="moName" label="管理处名" align="center"></el-table-column>
        <el-table-column prop="sectionName" label="路段名" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <!-- <el-button type="primary" @click="relrecord(scope.row)">关联信息</el-button> -->
            <el-button type="primary" @click="delrecord(scope.row)">删除</el-button>
            <el-button type="primary" @click="showupdaterecord(scope)">更新</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:center;">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
      ></el-pagination>
    </div>
    <el-dialog
      :title="isupdate ? '更新' : '添加'"
      :visible.sync="isadddia"
      center
      width="40%"
      @close="isadddia = false"
    >
      <el-form
        :model="refform"
        ref="refform"
        label-width="80px"
        style="margin: 0px 20px;"
        :rules="rules"
      >
        <el-form-item label="分组名称" prop="name">
          <el-input v-model="refform.name"></el-input>
        </el-form-item>
        <el-form-item label="经纬度" prop="location">
          <el-input v-model="refform.location"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" prop>
          <!-- <el-input v-model="refform.parentId"></el-input> -->
          <treeselect
            v-model="selecttreelabel"
            :options="selectMenuList"
            :normalizer="normalizer"
            placeholder="选择上级类目"
            :clearable="false"
            @select="treeselectclick"
          ></treeselect>
        </el-form-item>
        <el-form-item label="管理处" prop="moId">
          <!-- <el-input v-model="refform.moId"></el-input> -->
          <el-select v-model="refform.moId" placeholder="请选择" @change="menegeorroadchange">
            <el-option
              v-for="item in manageoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路段" prop="sectionId">
          <!-- <el-input v-model="refform.sectionId"></el-input> -->
          <el-select v-model="refform.sectionId" placeholder="请选择" @change="menegeorroadchange">
            <el-option
              v-for="item in roadoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="comment">
          <el-input v-model="refform.comment"></el-input>
        </el-form-item>
        <el-form-item label="关联设备">
          <el-tabs type="border-card">
            <el-tab-pane label="设备">
              <el-transfer v-model="chuansuoval" :data="chuansuodata" :titles="['未选', '已选']"></el-transfer>
            </el-tab-pane>
            <!-- <el-tab-pane label="分组">
              <el-transfer v-model="relgroupvalue" :data="relgroupdata" :titles="['已选', '未选']"></el-transfer>
            </el-tab-pane>-->
          </el-tabs>
        </el-form-item>
      </el-form>
      <!-- {{chuansuoval}}
      {{chuansuodata}}-->
      <span slot="footer">
        <el-button @click="isadddia = false">取 消</el-button>
        <el-button type="primary" @click="isupdate ? updaterecord() : addrecord()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import groupService from "@/api/groupService";
import roadService from "@/api/roadService";
import devService from "@/api/devService";
import managementService from "@/api/managementService";

// import the component
import Treeselect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  data() {
    return {
      loading: true,
      manageoptions: [],
      roadoptions: [],
      relgroupvalue: [],
      relgroupdata: [],
      listQuery: {
        name: "",
        parentId: "",
        comment: ""
      },
      pageSize: 10,
      currentPage: 1,
      totalNum: 0,
      isupdate: false,
      tableData: [],
      isadddia: false,
      refform: {
        name: "",
        moId: "",
        sectionId: "",
        parentId: 0,
        location: "",
        comment: "",
        relations: []
      },
      chuansuoval: [],
      chuansuodata: [],
      rules: {
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        location: [{ required: true, message: "不能为空", trigger: "blur" }],
        moId: [{ required: true, message: "不能为空", trigger: "blur" }],
        sectionId: [{ required: true, message: "不能为空", trigger: "blur" }],
        comment: [{ required: true, message: "不能为空", trigger: "blur" }]
      },
      selectMenuList: [],
      selecttreelabel: 0
    };
  },
  computed: {},
  watch: {
    isadddia: {
      handler: function(n, o) {
        //**************************************************************************************** */
        if (n && this.isupdate) {
          groupService
            .selectRelation({
              page: 1,
              count: 1000,
              groupId: this.refform.id,
              sectionId: this.refform.sectionId,
              moId: this.refform.moId
            })
            .then(res => {
              this.chuansuoval = [];
              this.relgroupvalue = [];
              res.data.records.map(item => {
                this.chuansuoval.push(item.relationId);
              });
            });

          devService
            .select({
              sectionId: this.refform.sectionId,
              moId: this.refform.moId,
              page: 1,
              count: 1000
            })
            .then(res => {
              this.chuansuodata = [];
              res.data.records.map(item => {
                this.chuansuodata.push({
                  key: item.id,
                  label: item.name
                });
              });
            });
        }
      }
    }
  },
  mounted() {
    this.initdata();
  },
  methods: {
    treeselectclick(node) {
      this.refform.parentId = node.id;
    },
    normalizer(node) {
      if (node.subs) {
        if (node.subs.length == 0) {
          return {
            id: node.id,
            label: node.name
          };
        } else {
          return {
            id: node.id,
            label: node.name,
            children: node.subs
          };
        }
      } else {
        return {
          id: node.id,
          label: node.name
        };
      }
    },
    showupdaterecord(scope) {
      this.isupdate = true;
      this.refform = _.cloneDeep(scope.row);
      this.selecttreelabel = this.refform.parentId;

      this.isadddia = true;
    },
    menegeorroadchange() {
      /*********************************************************************************************** */
      if (this.refform.sectionId != "" && this.refform.moId != "") {
        this.chuansuoval = [];
        this.chuansuodata = [];

        groupService
          .selectRelation({
            page: 1,
            count: 1000,
            groupId: _.has(this.refform, "id") ? this.refform.id : 9999999,
            sectionId: this.refform.sectionId,
            moId: this.refform.moId
          })
          .then(res => {
            this.chuansuoval = [];
            this.relgroupvalue = [];
            res.data.records.map(item => {
              this.chuansuoval.push(item.relationId);
            });

            devService
              .select({
                sectionId: this.refform.sectionId,
                moId: this.refform.moId,
                page: 1,
                count: 1000
              })
              .then(res => {
                this.chuansuodata = [];
                res.data.records.map(item => {
                  // if (item.type == 0) {
                  //   // item.id _
                  // }
                  this.chuansuodata.push({
                    key: item.id,
                    label: item.name
                  });
                });
              });
          });
      }
    },
    addattr() {
      let attr = {
        customTag: "",
        name: "",
        defaultValue: "",
        isRequire: 0,
        comment: ""
      };
      this.refform.attrs.push(attr);
    },
    delattr() {
      this.refform.attrs.pop();
    },
    sizeChange(val) {
      this.pageSize = val;
      this.initdata();
    },
    currentChange(val) {
      this.currentPage = val;
      this.initdata();
    },

    delrecord(row) {
      groupService.del({ ids: row.id }).then(res => {
        this.initdata();
        this.$message.success("删除成功");
      });
    },
    updaterecord() {
      this.$refs.refform.validate(valid => {
        if (valid) {
          this.refform.relations = [];

          this.chuansuoval.map(item => {
            this.refform.relations.push({
              relationId: item
              // type: 0
            });
          });

          groupService.update(this.refform).then(res => {
            this.isadddia = false;
            this.initdata();
            this.$message.success("修改成功");
          });
        }
      });
    },
    initdata() {
      this.loading = true;
      //获取所有列表树结构
      groupService
        .select({
          page: 1,
          count: 1000,
          isTree: 1
        })
        .then(res => {
          this.selectMenuList = res.data.records;
          this.selectMenuList.unshift({ id: 0, name: "无上级分类" });
          this.refform.parentId = 0;
          this.selecttreelabel = 0;
          // this.$message.success("数据加载成功");
          // this.loading = false;
        });
      //获取列表
      groupService
        .select({
          page: this.currentPage,
          count: this.pageSize,
          name: this.listQuery.name,
          isTree: 1
        })
        .then(res => {
          this.tableData = res.data.records;
          this.totalNum = res.data.total;
          // this.$message.success("数据加载成功");
          this.loading = false;
        });
      //获取路段列表
      roadService
        .select({
          page: 1,
          count: 1000
        })
        .then(res => {
          this.roadoptions = res.data.records;
        });
      //获取管理处列表
      managementService
        .select({
          page: 1,
          count: 1000
        })
        .then(res => {
          this.manageoptions = res.data.records;
        });
    },
    isadd() {
      this.isadddia = true;
      this.isupdate = false;
      this.resetinputdia();
      this.chuansuoval = [];
      this.chuansuodata = [];
    },

    resetinputdia() {
      this.refform = {
        name: "",
        moId: "",
        location: "",
        sectionId: "",
        comment: "",
        attrs: [],
        parentId: 0
      };
    },

    resetfiled() {
      this.listQuery.name = "";
      this.listQuery.parentId = "";
      this.listQuery.comment = "";
    },

    addrecord() {
      // this.isadddia = true
      this.$refs.refform.validate(valid => {
        if (valid) {
          this.refform.relations = [];

          this.chuansuoval.map(item => {
            this.refform.relations.push({
              relationId: item
              // type: 0
            });
          });

          // this.relgroupvalue.map(item => {
          //   this.refform.relations.push({
          //     relationId: item,
          //     type: 1
          //   });
          // });

          groupService.add(this.refform).then(res => {
            this.isadddia = false;
            this.initdata();
            this.$message.success("添加成功");
          });
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>